<template>
  <!-- 楼层组件 -->
  <div class="floor">
    <div class="ftop">
      <div class="big">{{ categoryItem.category.name }}</div>
      <div class="small">{{ categoryItem.category.name }}</div>
    </div>
    <div class="fbtm">
      <Product v-for="item in categoryItem.itemList" :key="item.id" :item="item">
        <template v-slot:tag>
          <div class="banner-wrap">
            <div class="top" v-if="item.finalPriceInfoVO.banner?.content">
              {{ item.finalPriceInfoVO.banner.content }}
            </div>
            <div class="btm" v-if="item.finalPriceInfoVO.banner?.title">
              {{ item.finalPriceInfoVO.banner.title }}
            </div>

          </div>
        </template>
      </Product>
    </div>



  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Floor',
})
</script>

<script lang="ts" setup>
import Product from '../../../../components/Product/index.vue'

const props = defineProps<{
  categoryItem: any
}>()

</script>

<style lang="scss" scoped>
.floor {
  margin-top: 10px;

  .ftop {
    text-align: center;
    margin-top: 10px;

    .small {
      font-size: 14px;
      margin-top: 5px;
      color: #CCC;
    }
  }

  .fbtm {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 10px;
    .banner-wrap {
        width: 170px;
        background: #ffe9eb;
        border-radius: 20px;
        .top {
          display: inline-block;
          width: 80px;
          // height: 20px;
          background-color: #fa1e32;
          border-radius: 20px;
          color: #fff;
          font-size: 12px;
          font-weight: 900;
          text-align: center;
        }

        .btm {
          display: inline-block;
          color: #fa1e32;
          font-size: 14px;
          text-align: center;
          width: 80px;
          height: 20px;
          background: #ffe9eb;
          border-radius: 20px;
        }
      }
  }

}
</style>